<template>

  <div class="block">
    <NavMenu></NavMenu>
    <h2>{{book.title}}</h2>
    <p class="xijie">作者：{{book.author}}&nbsp;|&nbsp;&nbsp;时间：{{book.date}}</p>
    <hr>

    <div style="width: 85%; margin: 0 auto" >
    <p class="name">&nbsp;第{{chapter.number}}章--{{chapter.name}}</p>
    <el-container>
<!--      <el-header></el-header>-->
      <el-container>
        <el-aside width="200px" height="300px">
          <img class="img"
               :src="book.cover">
        </el-aside>
        <el-main >
          <div style="text-align:left" v-html="chapter.content"></div>
        </el-main>

      </el-container>
    </el-container>
    </div>
    <hr>
  </div>

</template>

<script>
    import NavMenu from '@/components/common/NavMenu'
    export default {

        name: 'BookDetails',
        components: {NavMenu},
        data(){
            return {
                book: {
                    id: 0,
                    title: '',
                    cover: '',
                    author: '',
                    abs: '',
                    press: '',
                    date:''
                },
                chapter:{

                    id:0,
                    name:'',
                    number:1,
                    content:'',
                }
            }
        },


        mounted() {
            this.book.id = this.$route.query.id
            var _this = this
            this.$axios
                .get('/searchBook/' + this.book.id)
                // .get('/searchBook',{'id':this.book.id})
                // .get('/searchBook?id=' + this.book.id)
                .then(resp => {
                    if (resp.data.statusCode === 200) {
                        _this.book = resp.data.data
                        // _this.book.id = resp.data.data.id
                        // _this.book.title = resp.data.data.title
                        // _this.book.author = resp.data.data.author
                        // _this.book.cover = resp.data.data.cover
                    }
                });
            this.$axios
                .get('/getmain/'+ _this.book.id+'/'+_this.chapter.number)
                .then(resp=>{
                    if(resp.data.statusCode===200){
                        _this.chapter = resp.data.data
                    }
                })



        }
    };


</script>

<style>
  .box-card {
    margin-top: 5px;
    width: 988px;
    height: 1200px;
    text-align: left;
  }

  .img {
    width: 160px;
    height: 250px;
  }

  .title {
    vertical-align: top;
    height: 10px;
    font-size: 25px;
    font-weight: bold;
    line-height: 20px;
  }
.xijie{
  font-size: 15px;
  color: gray;
}
  .author {
    vertical-align: top;
    top: 20px;
    height: 100px;
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
  }

  .name{
    font-size: 27px;
    color: darkred;
  }
  p {
    text-indent: 2em;
  }
  .abs {
    /*vertical-align: top;*/
    left: 200px;
    line-height: 25px;
  }
</style>
